<template>
  <div class="a">
  <div class="b">

      <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1" @click="books()">商城</el-menu-item>
        <el-menu-item index="2" @click="order()">订单</el-menu-item>
        <el-menu-item index="3" @click="gou()">购物车</el-menu-item>
        <el-menu-item index="4" @click="activty()">限时活动</el-menu-item>
        <el-menu-item index="5" v-show="xxx" @click="login()">登录</el-menu-item>
        <el-submenu index="3"  class="aa">
          <template slot="title">设置</template>
          <el-menu-item index="2-1" @click="info()">个人信息</el-menu-item>
          <el-menu-item index="2-2" @click="passw()">修改密码</el-menu-item>
          <el-menu-item index="2-3" @click="shou()">收货地址</el-menu-item>
        </el-submenu>
      </el-menu>
      <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">
        <span v-for="(i,index) in fuser">
          用户名：<el-input v-model="i.name" placeholder="请输入用户名" class="el-input"></el-input><br><br>
          性别：<el-input v-model="i.sex" placeholder="请输入用户名" class="el-input"></el-input><br><br>
          邮箱：<el-input v-model="i.mail" placeholder="请输入用户名" class="el-input"></el-input><br><br>
          手机号：<el-input v-model="i.phone" placeholder="请输入用户名" class="el-input"></el-input>
        <br>
        <br>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false;fuserupdate(i)">确 定</el-button>
        </span>
      </span>
      </el-dialog>
      <el-dialog title="个人信息" :visible.sync="dialogVisible1" width="30%">
        <span v-for="(i,value) in fuser">
            <el-input v-model="passsword1.y" placeholder="请输入原密码！" class="el-input" show-password></el-input><br><br>
            <el-input v-model="passsword1.x" placeholder="请输入新密码！" class="el-input" show-password></el-input><br><br>
            <el-input v-model="passsword1.c" placeholder="请再输一次！" class="el-input" show-password></el-input><br><br>
          <br>
          <br>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible1 = false;pass(i.id,i.password,passsword1)">确 定</el-button>
          </span>
          </span>
      </el-dialog>
<!--aa-->
    <el-dialog  title="收货地址" :visible.sync="dialog" width="35%" :before-close="handleClose" :close="false">
      <el-table :data=" fsite" style="width: 100%;" v-show="tab">
          <el-table-column label="配送信息">
            <el-table-column prop="aa" label="详细地址" width="280"></el-table-column>
        </el-table-column>
        <el-table-column  label="操作" width="300">
          <template slot-scope="scope">
            <template>
              <el-popconfirm title="确定删除这个订单吗" @confirm="del(scope.row.id)" cancel-button-type="success">
                <el-button  type="danger" icon="el-icon-delete" slot="reference"  >删除该地址</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>

      </el-table>
      <el-button icon="el-icon-plus" type="primary" @click="frm=true;tab=false" v-show="tab">添加一个新地址</el-button>

      <el-form :model="f_site" :rules="rules" ref="f_site" v-show="frm">
        <el-form-item label="id" hidden>
          <el-input v-model="f_site.id"></el-input>
        </el-form-item>
        <el-form-item label="收货人姓名" prop="name">
          <el-input v-model="f_site.name"></el-input>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="f_site.province"></el-input>
        </el-form-item>
        <el-form-item label="市区" prop="city">
          <el-input v-model="f_site.city"></el-input>
        </el-form-item>
        <el-form-item label="县" prop="district">
          <el-input v-model="f_site.district"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="f_site.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-check" type="primary" @click="siteForm()">确定</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm('f_site')">重置所有</el-button>
          <el-button icon="el-icon-thumb" type="success" @click="fanhui()">点击返回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div class="c">

  <router-view></router-view>
  </div>
</div>
</template>

<script>
import store from "@/util/store";

export default {
  name: "Main",
  created() {
    this.user();
    this.books();
    this.findsite();
  },
  data() {
    return {
      fuser: [],
      f_site: {},
      fsite: {},
      dialogVisible: false,
      dialog: false,
      tab: false,
      frm: false,
      dialogVisible1: false,
      passsword1: {},
      xxx: true,
    }
  },
  methods: {
    //用户信息查询
    user() {
      let uid = store.state.user;
      this.$http.post("/frontservice/fuser/select", {uid: uid}).then(data => {
        console.log(data)
        this.fuser = data;
        console.log(this.fuser)
      })
    },
    pass(uid, password, password1) {
      this.$http.post("/frontservice/fuser/password", {a: password1.y, b: password}).then(data => {
        if (data) {
          if (password1.x == password1.c) {
            this.$http.post("/frontservice/fuser/updatePassword", {password: password1.x, id: uid}).then(data => {
              alert(data)
            })
          } else {
            alert("密码不一致！")
          }
        } else {
          alert("原密码不正确！")
        }
      })
    },
    fuserupdate(row) {
      this.$http.post("/frontservice/fuser/update", row).then(data => {
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }, order() {
      this.$router.push("/order")
    }, books() {
      this.$router.push("/book")
    }, gou() {
      this.$router.push("/gou")
    },
    activty(){
      this.$router.push("/activty")
    }
    , findsite() {//查该用户的收货地址
      let f_user = this.$store.state.user
      this.$http.post('/frontservice/site/find', {f_user}).then(data => {
        console.log(data.data)
        this.fsite = data.data
      })
    }, close() {
      this.tab = false
      this.frm = false
    }, del(id) {
      this.$http.post('/frontservice/site/del', {id}).then(data => {
        this.findsite()
      })
    }, resetForm(formName) {
      this.$refs[formName].resetFields();
    }, fanhui() {
      this.tab = true
      this.frm = false
    }, siteForm() {
      this.f_site.id = 0;
      this.f_site.f_user = this.$store.state.user
      this.$http.post('/frontservice/site/add', this.f_site).then(data => {
        if (data.data != null) {
          alert("添加成功")
          this.findsite()
          this.frm = false
          this.tab = true
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }, login() {
      this.$router.push("/login")
    },info(){
      let loginUser=sessionStorage.getItem('token')
      loginUser=this.$qs.parse(loginUser)
      console.log(loginUser)
      if (loginUser.uid!=null ){
        this.dialogVisible=true
      }else {
        alert("请登录")
      }

    },passw(){
      let loginUser=sessionStorage.getItem('token')
      loginUser=this.$qs.parse(loginUser)
      if (loginUser.uid!=null ){
        this.dialogVisible1=true
      }else {
        alert("请登录")
      }

    },shou(){
      let loginUser=sessionStorage.getItem('token')
      loginUser=this.$qs.parse(loginUser)
      if (loginUser.uid!=null ){
        this.tab=true
        this.dialog=true
      }else {
        alert("请登录")
      }

    }

  }
}
</script>

<style scoped>
div{
  /*border: 1px red solid;*/
}
.a{
  height: 900px;
}
.b{
  width: 100%;
  height: 100px;
}
.c{
  width: 100%;
  height: 780px;
}
.aa{
  float: right;
}
.el-input{
  width: 400px;
}
</style>
